<template>
  <div class="container">
    <div class="title">食用农产品检测量时间段趋势</div>
    <div class="body">
      <div class="chart" ref="lineRef"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref, onUnmounted } from "vue";
import * as echarts from "echarts";
import { getSjJclQSByHs } from "@/api";
const lineRef = ref<HTMLElement>();
const createOptions = (data: any) => {
  let option = {
    title: {
      text: "检测量（批次）",
      top: 20,
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
    grid: {
      x: 42,
      y: 60,
      x2: 15,
      y2: 25,
    },
    xAxis: {
      type: "category",
      data: data.map((e: any) => e.sj),
      axisLine: {
        lineStyle: {
          color: "#3A67A1",
        },
      },
      axisLabel: {
        show: true,
        color: "#fff",
        interval: 0,
        fontSize: 12,
      },
      splitLine: {
        show: true,
        lineStyle: {
          // type: 'dashed',
          width: 1,
          color: "#203C6D",
        },
      },
    },
    yAxis: {
      type: "value",
      nameTextStyle: {
        color: "#fff",
        fontSize: 16,
      },
      axisLabel: {
        formatter: "{value}",
        color: "#fff",
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          // type: 'dashed',
          width: 1,
          color: "#203C6D",
        },
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "transparent", // "rgba(0,186,255,.6)"
        },
      },
    },
    series: [
      {
        name: "Line 1",
        type: "line",
        symbol: "none",
        sampling: "lttb",
        smooth: true,
        itemStyle: {
          color: "RGBA(109, 249, 249, 1)",
        },
        areaStyle: {
          opacity: 1,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(109, 249, 249, 1)",
            },
            {
              offset: 1,
              color: "rgba(109, 249, 249, 0.1)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: data.map((item: any) => item.jcsum),
      },
    ],
    dataZoom: [
      //滑动条
      {
        xAxisIndex: 0, //这里是从X轴的0刻度开始
        show: false, //是否显示滑动条，不影响使用
        type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: 0, // 从头开始。
        endValue: 5, // 一次性展示6个。
      },
    ],
  };
  return option;
};
const timer = ref();
onMounted(async () => {
  const { data } = await getSjJclQSByHs();
  const option = createOptions(data);
  const line = echarts.init(lineRef.value!);
  line.setOption(option);
  timer.value = setInterval(() => {
    // 每次向后滚动一个，最后一个从头开始。
    if (option.dataZoom[0].endValue == data.length) {
      option.dataZoom[0].endValue = 5;
      option.dataZoom[0].startValue = 0;
    } else {
      option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
      option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
    }
    line.setOption(option);
  }, 2000);
});
onUnmounted(() => {
  timer.value && clearInterval(timer.value);
});
</script>
<style lang="scss" scoped>
.container {
  min-height: 0px;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/组 7704.png");
  background-size: cover;
  border: 1px solid #172f7e;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    height: 31px;
    font-size: 20px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    padding-top: 3px;
    flex: 0 0 auto;
  }
  .body {
    flex-grow: 1;
    display: flex;
    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
